<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title></title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
  <link rel="stylesheet" href="/static/mobile/weuix.css">

  <link rel="stylesheet" href="/static/mobile/css.css?v=1">
  <link rel="stylesheet" href="/static/mobile/iconfont.css">
  <style>
    .qNum,.qScore {
      font-weight: bold;
      margin: 4px 0;
    }
    .qTime{
      margin-top: 30px;
    }

    .name {
      margin: 60px 20px;
    }
    .btn {
      text-align: center;
      margin: 60px ;
    }
  </style>
</head>
<body>
<section id="content">
  <div class="header">
    <div class="weui-flex">
      <div class="weui-flex__item">
        <div class="placeholder" style="width: 25%;">
        </div>
      </div>

      <div class="weui-flex__item"><span class="page-header">模拟考试</span></div>
      <div class="weui-flex__item">
        <div class="placeholder"></div>
      </div>
    </div>
  </div>
  <div class="panel-body" v-show="paperId>0">
    <div class="name">
      <span>模拟考卷<span class="hide">{{paperId}}</span>中一共有 <span class="qNum">{{questionTotal}}</span> 道试题，其中：</span>
      <p></p>
      <span v-for="(item,index) in qConfig">{{qType[index]}}
        <span class="qNum">{{item.num}}</span> 题，
        <span>每题</span>
        <span class="qScore">{{item.score}}</span> 分<span v-show="index<questionTypeCount.length-1">，<p></p></span>

      </span>
      <span> 。</span>
      <p class="qTime">模拟考试时间 <span class="qNum">{{qExamDuration}}</span> 分钟。</p>
    </div>
    <div class="btn">
      <a href="test.html" class="weui-btn weui-btn_primary">开始考试
        <span v-show="cursor>0">({{cursor+1}})</span></a>
    </div>

  </div>
  <div id="footer"></div>

</section>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script src="/static/mobile/main.js"></script>

<script>

  var content = new Vue({
    el: "#content",
    data: {
      paperId:0,
      paperQuestions: [],
      paperQuestionIDs: [],
      questionTotal: 0,
      cursor: 0,
      cursorMax: 0,
      questionTypeCount: [],
      qConfig:[],
      qType:[],
      qExamDuration:0,

    },
    created: function () {
      var that = this;
      js_request('/portal/test/view_pre', {}, function (result) {
        var id, cursor;
        if (result.code == 0) {
          $.alert(result.msg, "错误");
          return false;
        }
        that.paperId = result.data.paperId;
        that.testAnswerId = result.data.testAnswerId;
        that.cursor = result.data.cursor;
        //
        that.cursorMax = result.data.cursorMax;
        that.cursor = result.data.cursor;
        that.qType = result.data.qType;
        that.qExamDuration = result.data.qExamDuration;
        that.qConfig = JSON.parse(result.data.qConfig);

      });
    },
    mounted:function(){
      $("#footer").load('footer.html');
    },
    watch: {
      paperId: function () {
        var that = this;
        js_request("/portal/test/getPaperQuestions", {"paper_id": that.paperId}, function (result) {
          if (result.code == 1) {
            var id = -1, cursor = that.cursor;
            if (!result.data) {
              js_alert('没有内容');
              return false;
            }
            that.paperQuestionIDs = result.data.paperQuestionIDs;
            id = that.paperQuestionIDs[cursor];
            that.paperQuestions = result.data.paperQuestions;
            that.active = result.data.active;
            //
            that.questionTotal = that.paperQuestionIDs.length;
            that.questionTypeCount = result.data.questionTypeCount;
            cursor = that.cursor;
          } else {
            js_alert(result.msg);
          }
        });
      }

    },
    methods: {},
  });
</script>
</body>
</html>